<template>
  <div>
   <!-- 点击添加属性按钮触发自定义事件 -->
      <el-button :icon="Plus" type="primary" :disabled="!categoryStore.category3Id" @click="toAddSpuInfo">添加SPU</el-button>
      <el-table border style="margin:20px 0" :data="spuList">
        <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
  <el-table-column label="SPU名称" prop="spuName" ></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="操作">
        <template v-slot="{row,$index}">
          <el-button title="添加SKU" size="small" type="primary" :icon="Plus" @click="toAddSkuInfo(row)"></el-button>

          <el-button title="修改SPU" size="small" :icon="Edit" type="primary" @click="toEditSpuInfo(row)"></el-button>

          <el-button title="查看SKU列表" :icon="InfoFilled" size="small" type="info" @click="checkSkuList(row)"></el-button>

          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF" title="真的确定要删除此条数据么?" @confirm="deleteSpuInfo(row.id)">
            <template #reference>
              <el-button title="删除" type="danger" size="small" :icon="Delete" />
            </template>
          </el-popconfirm>
        </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[3,6,9,12]" :small="small" 
      :disabled="disabled" 
      :background="background" 
      layout=" prev, pager, next, jumper,->, sizes,total" :total="total" 
      @size-change="handleSizeChange(pageSize)" @current-change="handleCurrentChange(currentPage)" />
  </div>

  <!-- 增加一个对话框 -->
  <el-dialog v-model="dialogSkuVisible" title="spuName">
    <el-table :data="skuList">
      <el-table-column property="skuName" label="名称" width="150" />
      <el-table-column property="price" label="价格" width="200" />
      <el-table-column property="weight" label="重量(千克)" />
      <el-table-column label="默认图片" >
        <template v-slot="{row}">
          <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg"  />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script lang="ts">
  export default {
    name: 'Spu',
  }
  </script>
  
  <script lang="ts" setup>
  import {ref,watch} from 'vue'
  import { Plus, Edit, Delete, InfoFilled } from'@element-plus/icons-vue'
  import { ElMessage } from 'element-plus';
import { reqGetSpuListData, reqDeleteSpuInfo } from '@/api/product/spu'

import { reqFindBySpuId} from '@/api/product/sku'

  import {useCategorySelectorInfoStore} from '@/stores/categorySelector'

const categoryStore = useCategorySelectorInfoStore()
//对话框的显示与隐藏
const dialogSkuVisible = ref(false)

//存放sku列表的数据
const skuList = ref([])
const spuName = ref([])

const currentPage = ref<number>(1)
const pageSize = ref<number>(5)
const total = ref<number>(1)
const spuList = ref([])
//接收传递过来的自定义事件
const emits = defineEmits(['changeScene','getSpuInfo'])
  // 分页相关的两个事件
  // 3. 更改每页显示条数时触发的事件处理程序
  const handleSizeChange = (val: number) => {
    // val就是每页显示的条数 其实也相当于是pageSize
    pageSize.value = val
  currentPage.value = 1
  // 重新获取页面列表数据
  getSpulistData()
  }
  
  // 4. 根据当前页码进行切换时触发的函数
  const handleCurrentChange = (val: number) => {
    currentPage.value = val
     // 重新获取页面列表数据
    getSpulistData()
}

//定义一个获取spu列表数据的函数
const getSpulistData =async () => {
  const result = await reqGetSpuListData(currentPage.value, pageSize.value, categoryStore.category3Id as number) 
  console.log('spuList',result);
  
  spuList.value = result.records
  total.value = result.total
}

// 当category3id有值时,获取spu数据列表数据
watch(
  () => categoryStore.category3Id,
  category3Id => {
    if (!category3Id) {
      spuList.value = [] // 赋值为空
      return // 不发送请求
    }
    getSpulistData()
  },
  { immediate: true }
)

//删除spu
const deleteSpuInfo = async (id: number) => {
  //reqDeleteSpuInfo 
  await reqDeleteSpuInfo(id)
  ElMessage.success('删除spu成功...')

  // 重新刷新页面
  getSpulistData()
}

//点击编辑spu按钮触发的函数
const toEditSpuInfo = (row:any) => {
  //跳转到spu页面
  emits('changeScene', 2)
  //子传父发送spu数据
  emits('getSpuInfo',row)
}

//点击添加spu

const toAddSpuInfo = () => {
  //添加spu数据时,应该将列表中的数据清空,所以给父组件传递一个空数据,这样父组件传递给spuForm传递过去的也是一个空数据
  emits('getSpuInfo',{})
  emits('changeScene',2)
}

//点击添加skuInfo , 跳转到SkuInfo 页面,并将spu传递过来

const toAddSkuInfo = (row:any) =>{
  emits('changeScene', 3)
  emits('getSpuInfo',row)
}

//查看sku列表
const checkSkuList = async (row:any) => { 
  const result = await reqFindBySpuId(row.id)
  // console.log('rr',result)
  dialogSkuVisible.value = true
  skuList.value = result
  spuName.value = row.spuName

}

  </script>
  
  
  <style>
  </style>
